<template>
    <view
        style="
            justify-content: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            height: 100%;
        "
    >
        <view v-if="status == 0" class="middle_view">
            <label class="title_label">请拿手机站在秤上</label>
            <image class="device_img" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/binding_logo.png"></image>
            <image class="status_img" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/bing_icon.png"></image>
            <label class="status_label">绑定中…</label>
        </view>
        <view v-if="status == 1" class="middle_view">
            <label class="title_label">{{ errorMessage }}</label>
            <image class="device_img" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/reconnect_logo.png"></image>
            <image class="status_img" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/reconnect_icon.png"></image>
            <view @click="reDiscovery()" class="reconnect_btn">重新绑定</view>
        </view>
        <view v-if="status == 2" class="middle_view">
            <label class="title_label">绑定成功！</label>
            <image class="device_img" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/bind_success_logo.png"></image>
            <image class="status_img" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/bind_success_icon.png"></image>
            <label class="status_label">绑定成功</label>
        </view>
    </view>
</template>

<script>
import { mapState } from 'vuex';

export default {
    data() {
        return {
            balance: {},
            status: 0, //0 1 2
            errorMessage: '',
        };
    },
    computed: {
        ...mapState(['connectDeviceId']),
    },
    watch: {
        // 监听蓝牙设备
        '$store.state.devicesList': {
            immediate: true,
            deep: true,
            handler(e) {
                if (e.length > 0) {
                    e.forEach((item) => {
                        if (item.name == '倾小体' && this.balance.deviceId != item.deviceId) {
                            this.$store
                                .dispatch('stopBluetoothDevicesDiscovery')
                                .then((res) => {})
                                .catch((err) => {});
                            this.balance = item;
                            this.connectBlue(this.balance);
                        }
                    });
                }
            },
        },
    },
    methods: {
        connectBlue(item) {
            if (this.connectDeviceId == item.deviceId) {
                this.status = 1;
                this.errorMessage = '当前设备已存在';
                return;
            }
            if (item.isconnect) {
                return;
            }
            this.$store
                .dispatch('createBLEConnection', item)
                .then(() => {
                    this.addDevice();
                    this.notifyBLEConnectionStateChange();
                })
                .catch((err) => {});
        },
        async notifyBLEConnectionStateChange() {
            uni.onBLEConnectionStateChange((res) => {
                this.balance.isconnect = res.connected;
                if (res.connected == false && res.deviceId == this.balance.deviceId) {
                    this.$store.commit('setConnectDeviceId', '');
                }
            });
        },
        addDevice() {
            if (this.balance.name && this.balance.deviceId) {
                var form = {
                    name: this.balance.name,
                    deviceId: this.balance.deviceId,
                };
                this.request.httpTokenJsonRequest('/mp-api/wx/device/add', form, 'POST', true).then((res) => {
                    if (res.code == 0) {
                        this.status = 2;
                        setTimeout(() => {
                            uni.navigateBack();
                        }, 4000);
                    } else {
                        this.status = 1;
                        this.errorMessage = res.message;
                    }
                });
            }
        },
        reDiscovery() {
            this.balance = {};
            this.status = 0;
            this.$store
                .dispatch('startBluetoothDevicesDiscovery')
                .then((res) => {})
                .catch((err) => {});
        },
    },
    onLoad() {
        this.$store
            .dispatch('startBluetoothDevicesDiscovery')
            .then((res) => {})
            .catch((err) => {});
    },
    onUnload() {
        this.$store
            .dispatch('stopBluetoothDevicesDiscovery')
            .then((res) => {})
            .catch((err) => {});
    },
};
</script>

<style scoped>
.middle_view {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.title_label {
    color: #333333;
    font-size: 36rpx;
}
.device_img {
    height: 668rpx;
    width: 100%;
}
.status_img {
    margin-top: 94rpx;
    width: 112rpx;
    height: 112rpx;
}
.status_label {
    margin-top: 34rpx;
    color: #418170;
    font-size: 34rpx;
}
.reconnect_btn {
    width: 328rpx;
    height: 96rpx;
    border-radius: 24rpx;
    border: 2rpx solid #418170;
    line-height: 96rpx;
    text-align: center;
    color: #418170;
    font-size: 30rpx;
    margin-top: 40rpx;
}
</style>
